<template>
  <div class="mod-home" :style="{height: siteContentViewHeight + 'px'}" :class="{maximized: maximized}">
    <home-header :maximized="maximized" @change="handleFullScreen"></home-header>
    <div class="container" :style="{height: siteContentViewHeight - 88 + 'px'}">
      <home-jingji :jingjiData="jingjiData" :jingjiHeight="siteContentViewHeight"></home-jingji>
      <home-yunxing-zhuangtai :zhuangtaiData="zhuangtaiData"></home-yunxing-zhuangtai>
      <div class="right-data">
        <home-lighting :lightingData="lightingData"></home-lighting>
        <home-monitor :monitorData="jiankongData"></home-monitor>
        <home-monitor :monitorData="rfidData"></home-monitor>
      </div>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import HomeHeader from './components/Header'
import HomeJingji from './components/Jingji'
import HomeYunxingZhuangtai from './components/YunxingZhuangtai'
import HomeLighting from './components/Lighting'
import HomeMonitor from './components/Monitor'
export default {
  name: 'Home',
  components: {
    HomeHeader,
    HomeJingji,
    HomeYunxingZhuangtai,
    HomeLighting,
    HomeMonitor
  },
  data () {
    return {
      // 是否全屏
      maximized: false,
      // 重置高度
      homeHeight: 122,
      dialogVisible: false,
      jingjiData: {
        title: '发电经济指标',
        widget: [
          {
            key: '累计用电(度)',
            value: '3000'
          },
          {
            key: '累计收益(万元)',
            value: '28'
          },
          {
            key: '累计碳排放(公斤)',
            value: '3000'
          },
          {
            key: '累计更换成本(万元)',
            value: '3'
          },
          {
            key: '累计发电小时',
            value: '6789'
          },
          {
            key: '累计风发电小时',
            value: '3264'
          },
          {
            key: '累计光发电小时',
            value: '1359'
          },
          {
            key: '光发电量(度)',
            value: '1358'
          },
          {
            key: '风发电量(度)',
            value: '2648'
          }
        ],
        pie: {
          feng: 200,
          guang: 230
        },
        bar1: {
          title: '年发电量',
          color: '#e24d42',
          unit: '度',
          type: 'bar',
          data: [100, 200, 150, 80, 120, 110, 130, 60, 150, 80, 70, 100]
        },
        bar2: {
          title: '当年碳排放',
          color: '#eab839',
          unit: '公斤',
          type: 'bar',
          data: [150, 200, 150, 80, 70, 210, 130, 200, 100, 80, 70, 100]
        },
        bar3: {
          title: '当年收益',
          color: '#ef843c',
          unit: '万元',
          type: 'bar',
          data: [120, 200, 150, 200, 70, 110, 130, 200, 140, 80, 120, 90]
        },
        bar4: {
          title: '年更换成本',
          color: '#6aaf62',
          unit: '万元',
          type: 'bar',
          data: [60, 200, 150, 100, 70, 90, 130, 80, 150, 80, 50, 100]
        }
      },
      zhuangtaiData: {
        title: '发电运行状态',
        pie: {
          yunxing: {
            name: '运行台数',
            value: 200
          },
          daiji: {
            name: '待机台数',
            value: 60
          },
          baojing: {
            name: '报警台数',
            value: 0
          },
          guzhang: {
            name: '故障台数',
            value: 30
          },
          duanxian: {
            name: '断线台数',
            value: 0
          }
        },
        percent1: {
          title: '当年故障率'
        },
        percent2: {
          title: '当年更换率'
        },
        line: {
          title: '',
          color: '#e24d42',
          unit: '故障率(%)',
          type: 'line',
          data: [10, 20, 15, 8, 12, 11, 13, 6, 15, 8, 7, 10]
        }
      },
      lightingData: {
        title: '照明',
        widget: [
          {
            key: '总数量(盏)',
            value: '4000'
          },
          {
            key: '总功率',
            value: '3250'
          },
          {
            key: '亮灯率',
            value: '98%'
          },
          {
            key: '亮灯时长',
            value: '230'
          },
          {
            key: '年更换率',
            value: '12%'
          },
          {
            key: '年故障率',
            value: '5%'
          }
        ]
      },
      jiankongData: {
        title: '监控',
        widget: [
          {
            key: '总数量',
            value: '4000'
          },
          {
            key: '年故障率',
            value: '15%'
          },
          {
            key: '年更换率',
            value: '12%'
          },
          {
            key: '年更换成本(元)',
            value: '4500'
          }
        ]
      },
      rfidData: {
        title: 'RFID',
        widget: [
          {
            key: '总数量',
            value: '4000'
          },
          {
            key: '年故障率',
            value: '15%'
          },
          {
            key: '年更换率',
            value: '12%'
          },
          {
            key: '年更换成本(元)',
            value: '4500'
          }
        ]
      }
    }
  },
  computed: {
    documentClientHeight: {
      get () { return this.$store.state.common.documentClientHeight }
    },
    siteContentViewHeight () {
      let height = this.documentClientHeight - this.homeHeight
      return height
    }
  },

    // 执行刷新
    // mounted () {
    //     if (this.timer) {
    //         clearInterval(this.timer)
    //     } else {
    //         this.timer = setInterval(() => {
    //                 this.getHomeList()
    //         }, 20000)
    //     }
    // },
  activated () {
    this.getHomeList()
  },
  methods: {
      // 获取大屏数据
      getHomeList() {
          this.$http({
              url: this.$http.adornUrl("/udp/r5rmskillstatus/home"),
              methods: "get"
          }).then(({data}) => {
              if (data && data.code === 0) {
                  this.jingjiData.widget[0].value = data.result.ssUdfnumber01;
                  this.jingjiData.widget[1].value = data.result.ssUdfnumber01;
                  this.jingjiData.widget[2].value = data.result.ssUdfnumber01;
                  this.jingjiData.widget[3].value = data.result.ssUdfnumber01;
                  this.jingjiData.widget[4].value = data.result.ssUdfnumber01;
                  this.jingjiData.widget[5].value = data.result.ssUdfnumber01;
                  this.jingjiData.widget[6].value = data.result.ssUdfnumber01;
                  // 光总发电量
                  this.jingjiData.widget[7].value = data.result.ssUdfnumber01;
                  // 风总发电量
                  this.jingjiData.widget[8].value = data.result.ssUdfnumber02;
                  // 光发电量
                  this.jingjiData.pie.feng = data.result.ssUdfnumber02;
                  // 风发电量
                  this.jingjiData.pie.guang = data.result.ssUdfnumber01;
                  // 运行台数
                  this.zhuangtaiData.pie.yunxing.value = data.result.yunxing;
                  // 故障台数
                  this.zhuangtaiData.pie.guzhang.value = data.result.guzhang;
                  // 待机台数
                  this.zhuangtaiData.pie.daiji.value = data.result.daiji;
                  console.log(this.jingjiData.pie.feng);
              }
          })
      },
    // 全屏
    handleFullScreen () {
      let element = document.documentElement
      if (this.maximized) {
        if (document.exitFullscreen) {
          this.homeHeight = 122
          document.exitFullscreen()
        } else if (document.webkitCancelFullScreen) {
          this.homeHeight = 122
          document.webkitCancelFullScreen()
        } else if (document.mozCancelFullScreen) {
          this.homeHeight = 122
          document.mozCancelFullScreen()
        } else if (document.msExitFullscreen) {
          this.homeHeight = 122
          document.msExitFullscreen()
        }
      } else {
        if (element.requestFullscreen) {
          this.homeHeight = 0
          element.requestFullscreen()
        } else if (element.webkitRequestFullScreen) {
          this.homeHeight = 0
          element.webkitRequestFullScreen()
        } else if (element.mozRequestFullScreen) {
          this.homeHeight = 0
          element.mozRequestFullScreen()
        } else if (element.msRequestFullscreen) {
          // IE11
          this.homeHeight = 0
          element.msRequestFullscreen()
        }
      }
      this.maximized = !this.maximized
    }
  }
}
</script>

<style lang="scss">
  .mod-home {
    display: flex;
    flex-direction: column;
    line-height: 1.5;
    background-color: #010619;
    width: 100%;
    padding: 0 10px;
    &.maximized{
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      z-index: 99999;
      margin: 0;
      overflow: auto;
    }
    .container{
      display: flex;
      flex-direction: row;
      flex: 1;
      .right-data{
        display: flex;
        flex-direction: column;
      }
    }
  }
</style>

